<template>
  <div class="home card">
    <!-- <transition-group name="drag" class="list" tag="ul">
      <li
        @dragstart.self="dragstart(index)"
        @dragenter.self="dragenter($event, index)"
        @dragover.prevent
        :draggable="true"
        v-for="(item, index) in list"
        :key="item.label"
        :id="index"
        class="list-item"
      >
        {{ item.label }}
      </li>
    </transition-group> -->
    <img class="home-bg" src="@/assets/images/welcome.png" alt="welcome" />
  </div>
</template>

<script setup lang="ts" name="home">
// import { ref } from "vue";
// const list = ref([
//   { label: "列表1" },
//   { label: "列表2" },
//   { label: "列表3" },
//   { label: "列表4" },
//   { label: "列表5" },
//   { label: "列表6" }
// ]);
// const dragIndex = ref(0);

// function dragstart(index: number) {
//   dragIndex.value = index;
// }
// function dragenter(e: any, index: any) {
//   // 避免源对象触发自身的dragenter事件
//   if (dragIndex.value !== index) {
//     const moving = list.value[dragIndex.value];
//     list.value.splice(dragIndex.value, 1);
//     list.value.splice(index, 0, moving);
//     // 排序变化后目标对象的索引变成源对象的索引
//     dragIndex.value = index;
//   }
// }
</script>

<style scoped lang="scss">
@import "./index.scss";
.list {
  list-style: none;
  .drag-move {
    transition: transform 0.3s;
  }
  .list-item {
    width: 300px;
    height: 50px;
    margin-bottom: 6px;
    line-height: 50px;
    color: #ffffff;
    text-align: center;
    cursor: move;
    background: #ea6e59;
    border-radius: 4px;
  }
}
</style>
